<template>
  <el-dialog :title="title" :width="width" :visible.sync="isShowVisible" center :close-on-click-modal="false" :before-close="() => $emit('close')">
    <el-card v-loading="isLoading">
      <el-form label-width="105px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类名称:">
              <span>{{groupData.fname}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类编码:">
              <span>{{groupData.fnumber}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="上级分类:">
          <!--          <span>{{groupData.fparentid}}</span>-->
          <el-select v-model="groupData.fparentid" disabled class="select-disabled">
            <el-option v-for="item in groupList" :key="item.nodeId+''" :label="item.nodeName" :value="item.nodeId+''">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MaterialGroupApi from '@/api/material/MaterialGroupApi'
export default {
  name: 'materialGroup_detail',
  props: {
    width: {
      type: String,
      default: '60vw'
    },
    groupId: {
      type: Number,
    },
  },
  data () {
    return {
      title: '分类详情',
      isShowVisible: true,
      isLoading: false,
      groupData: {},
      groupList: []
    }
  },
  async created () {
    this.isLoading = true
    let http = new MaterialGroupApi()
    let groupList = await http.queryGroupTree({})
    this.groupList = groupList.data
    let groupData = await http.detail({ fid: this.groupId })
    this.groupData = groupData.data
    this.isLoading = false
  },
}
</script>

<style scoped lang="scss">
.select-disabled {
  /deep/ .is-disabled {
    .el-input__inner {
      color: #000;
    }
  }
}
</style>
